<template>
    <div class="page">
      <div style="align-self: center">
        <div style="font-size: 20px">
          <span>{{title}}</span>
        </div>
        <Breadcrumb separator=">" style="margin-top: 5px;">
          <BreadcrumbItem>{{parentClassName}}</BreadcrumbItem>
          <BreadcrumbItem>{{className}}</BreadcrumbItem>
        </Breadcrumb>
        <div style="margin-top: 5px;color: grey" v-if="respVideoDetailData.data"><Icon type="logo-youtube" style="margin-left: 5px"/> {{respVideoDetailData.data.playTimes}}<Icon type="ios-time" style="margin-left: 20px"/> {{respVideoDetailData.data.createTime}}</div>
        <div style="width: 1000px;margin-top: 5px" v-if="playerOptions.sources[0].src">
          <video-player  class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
          ></video-player>
        </div>
        <div style="margin-top: 5px">
          <Button type="text" @click="addCollectionModalShow">
            <Icon size="30" type="ios-star"/> <span style="font-size: 20px">收藏</span>
          </Button>
          <Modal v-model="modal.addCollectionModal" title="添加到收藏夹" @on-ok="addCollection" @on-cancel="resetFormData">
            <Input placeholder="请输入收藏夹名称" style="width: 200px;margin-left: 100px" clearable autofocus></Input>
            <Button type="info" style="margin-left:10px">搜索</Button>
            <Divider></Divider>
            <CheckboxGroup v-model="formData.favoritesIds" style="margin: 30px">
              <Row :gutter="5" v-for="item in respFavoritesData.data">
                <Checkbox :label="item.id">
                  <span style="font-size:20px">{{item.favoritesName}}</span>
                </Checkbox>
              </Row>
            </CheckboxGroup>
          </Modal>
        </div>
      </div>
    </div>
</template>

<script>
    import VideoService from "../services/VideoService";
    import ClassificationService from "../services/ClassificationService";
    import cookies from 'js-cookie';
    import FavoritesService from "../services/FavoritesService";
    import CollectionService from "../services/CollectionService";
    export default {
        name: "VideoDetailComponent",
        data(){
          return{
            videoService:null,
            classificatoinService:null,
            favoritesService:null,
            collectionService:null,
            modal:{
              addCollectionModal:false
            },
            formData:{
              favoritesIds:[]
            },
            respVideoDetailData:[{data:null}],
            respFavoritesData:{data:[], total:null},
            videoId:null,
            title:null,
            className:null,
            parentClassName:null,
            playerOptions : {
              playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0], //播放速度
              autoplay: false, //如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              sources: [{
                type: "application/x-mpegURL",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "" //url地址
              }],
              poster: "", //你的封面地址
              width: document.documentElement.clientWidth, //播放器宽度
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
              }
            }
          }
        },
        created(){
          this.init();
        },
        methods:{
            init(){
              this.videoId = this.$route.query.videoId;
              this.videoService = new VideoService(this);
              this.classificatoinService = new ClassificationService(this);
              this.favoritesService = new FavoritesService(this);
              this.collectionService = new CollectionService(this);
              this.getVideoDetail();
            },
            getVideoDetail(){
              let params = {
                "id": this.videoId,
                "orderType": 0
              };
              this.videoService.searchVideo(params, function (_this, data) {
                _this.respVideoDetailData.data = data.data[0];
                _this.playerOptions.sources[0].src = _this.respVideoDetailData.data.videoUrl;
                _this.title = data.data[0].title;
                let params = {
                  "classificationId":data.data[0].classificationId+""
                };
                _this.classificatoinService.getClassByClassId(params, function(_this, data){
                   _this.className = data.data[0].classificationName;
                   _this.parentClassName = data.data[0].parentClassName;
                })
              });
            },
            searchFavorites(currentPage, pageCount){
              let params = {
                "currentPage": currentPage + "",
                "pageCount": pageCount + "",
                "userId" : cookies.get("UserId")
              };
              this.favoritesService.searchFavorites(params, function (_this, data) {
                _this.respFavoritesData.data = data.data;
                _this.respFavoritesData.total = data.page.total;
              });
            },
            addCollection(){
              let params = {
                "favoritesIds": this.formData.favoritesIds,
                "videoId": this.videoId,
                "userId" : cookies.get("UserId")
              };
              // console.log(this.videoId);
              // console.log(this.formData.favoritesIds);
              this.collectionService.addCollection(params);
            },
            addCollectionModalShow(){
              this.modal.addCollectionModal=true;
              this.searchFavorites(0,100);
            },
            resetFormData(){

            },
        }
    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: initial;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
</style>
